<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/jsp/common/taglibs.jsp"%>
<bsl:layout-render name="/WEB-INF/jsp/portalCommon/layout.jsp">
<bsl:layout-component name="html-head">
<meta name="description" content="Windy Warm Corporation is always engaged in manufacturer of gasoline containers and has many kinds of gas can series. Oue contact information will let you find us easily.">

<link rel="stylesheet" href="<%=request.getContextPath()%>/css/jqtransform.css" type="text/css" media="all" />	
<link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/css/viewDetails.css" />
<link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/css/validation.css" />
<script src="<%=request.getContextPath()%>/js/jquery.jqtransform.js"></script>
<script src="<%=request.getContextPath()%>/js/validation.js"
		type="text/javascript"></script>
<script charset="utf-8" src="<%=request.getContextPath()%>/editor/kindeditor-min.js"></script>
<script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

  ga('create', 'UA-41141994-1', 'windywarm.com');
  ga('send', 'pageview');

</script>
<script type="text/javascript">


var editor;
KindEditor.ready(function(K) {
	$("#messageForm").jqTransform();
	editor = K.create('textarea[name="enquiry.content"]', {
		langType:'en',
		resizeType : 1,
		allowPreviewEmoticons : false,
		allowImageUpload : false,
		
		afterChange : function() {
	     
	      var limitNum = 10000;  //设定限制字数
	      var pattern = '( Chars left: ' + limitNum + " )";
	      $('.word_surplus').html(pattern); //输入显示
	      if(this.count('text') > limitNum) {
	       pattern = ('( Excess max chars size)');
	       //超过字数限制自动截取
	       var strValue = editor.text();
	       strValue = strValue.substring(0,limitNum);
	       editor.text(strValue);      
	       } else {
	       //计算剩余字数
	       var result = limitNum - this.count('text');
	       pattern = '( Chars left: ' + result + ' )';
	       }
	       $('.word_surplus').html(pattern); //输入显示
	      ////////
	     } ,
		items : [
			'fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold', 'italic', 'underline',
			'removeformat', '|', 'justifyleft', 'justifycenter', 'justifyright', 'insertorderedlist',
			'insertunorderedlist', '|', 'emoticons', 'image', 'link']
	});
});
var emailVerify,nameVerify;
$(function(){
	 	
	    emailVerify = new LiveValidation('email' , {onlyOnBlur: true});
		emailVerify.add(Validate.Email, { failureMessage: "Must be a valid email address!"} );
		emailVerify.add(Validate.Presence, { failureMessage: "Please enter your Email address!"}  );
		nameVerify = new LiveValidation('name', {onlyOnBlur: true});
		nameVerify.add(Validate.Presence, { failureMessage: "Please enter your name!"} );
		nameVerify.add( Validate.Length, { maximum:100, tooLongMessage:"Max chars 100" } );

});


</script>


</bsl:layout-component>
<bsl:layout-component name="title">
Gas Cans - ${curDivision.divNameEn}
</bsl:layout-component>
<bsl:layout-component name="content" >
<c:set var="contextPath" value="<%=request.getContextPath()%>"></c:set>
<c:set value="gas-cans" var="urlPrefix"></c:set>	
	
	<div class="potal_title_div">
				<div style="float:left;font: 12px/38px Verdana,microsoft yahei,Arial;padding-left:32px;color:#505050;">
					<a href="${contextPath}/${urlPrefix}/viewHome">Home</a> &gt; Contact Us
				</div>
					
				</div>
	
	
<div class="details_content">
 <div class="details_content_txt" >
<form action="${contextPath}/${urlPrefix}/saveEnquiry" name="messageForm" id="messageForm" >

<table width="500px" border="0" cellpadding="0" cellspacing="0" align="CENTER"  style="border: 1px solid rgb(179, 179, 179);background:#f3f3f3;height:22px;padding:4px;">
			<c:if test="${not empty saveSuccess}">
				<tr>
					<td colspan="2" style="background-color: #c3402f;color: white; padding: 4px;">
						Your enquiry has been sent successfully, we will response you as soon as possible. Thanks very much!
					</td>
				</tr>
			</c:if>
			<tr>
				<td colspan="2" style="background:#f3f3f3;height:22px;padding:4px;">
					<font color="#ff0000">*</font>&nbsp;Describe Your Buying Requirements in Detail
					<div class="word_surplus sign-text" style="float: right;"></div>
				</td>
			</tr>
			<c:if test="${not empty article && not empty article.album}">
			<tr>
				<td style="padding: 4px">
					<input type="hidden" name="enquiry.articleId" value="${article.id}">
					${article.title}
				</td>
				<td align="center">
					<img alt="" src="${contextPath}${article.album.coverPhoto.thumbnailSmall}">
				</td>
				
			</tr>
			</c:if>
			<tr>
				<td colspan="2" style="margin: 5px;">
					
					<textarea id="equiry_content" style="width: 550px;" rows="10" name="enquiry.content"></textarea>
				</td>
			</tr>
			<tr>
				<td colspan="2" style="padding: 4px">
                	  Please Fill Your Contact Information
				</td>
			</tr>
			 <tr>
			 	<td width="100px;" style="padding: 4px;text-align: right;">
			 		<font color="#ff0000">*</font>&nbsp;Your name:
			 	</td>
			 	<td>
			 		<div style="vertical-align: middle; margin-top: 5px;">
					<select name="enquiry.preName" style="width: 60px;">
					<option value="Mr." selected="SELECTED">Mr.  </option>
	
					<option value="Ms.">Ms. </option>
					<option value="Mrs.">Mrs. </option>
					<option value="Dr.">Dr. </option>
					</select>
					&nbsp;	
					<input id="name"  name="enquiry.customerName"   type="text" style="width:215px;" >
					</div>
				</td>
			</tr>
			<tr>
				<td style="padding: 4px;text-align: right;">
					<font color="#ff0000">*</font>&nbsp;Email:
				</td>
				<td>
					<input id="email" type="text" name="enquiry.email" style="width: 318px;">
				</td>
			</tr>
			<tr>
				<td style="padding: 4px;text-align: right;">
					Company:
				</td>
				<td>
					<input type="text" name="enquiry.company" style="width: 318px;">
				</td>
			</tr>
			<tr>
				<td style="padding: 4px;text-align: right;">
					Website:
				</td>
				<td>
					<input type="text" name="enquiry.website" style="width: 318px;">
				</td>
			</tr>
			<tr>
				<td style="padding: 4px;text-align: right;">
					Address:
				</td>
				<td>
					<input type="text" name="enquiry.address" style="width: 318px;">
				</td>
			</tr>
			<tr>
                <td style="background:#f3f3f3;height:22px;padding:4px 0 0 5px;" colspan="2">
	                <div align="CENTER"><button class="btn btn-info">Send Enquiry</button></div>	
	                <p style="font-size: 10px;">(<font color="#ff0000">*</font> represents compulsory fields)</p>
                </td>
			</tr>
		</table> 

</form>		
</div>
</div>
	


</bsl:layout-component>

<bsl:layout-component name="side_info">

	<jsp:include page="prodCateInfo.jsp">
		<jsp:param value="${productDiv}" name="productDiv"/>
 		<jsp:param value="${curCategory}" name="curCategory"/>
   	</jsp:include>
	
		<jsp:include page="contactInfo.jsp">
		<jsp:param value="null" name="null"/>
   	</jsp:include>
	
</bsl:layout-component>


<bsl:layout-component name="footer_info">
	<a>abc</a>
</bsl:layout-component>
</bsl:layout-render>